@{
    ViewBag.Title = "Layui表单生成器,Layui在线表单生成器,在线表单";
    ViewBag.keywords = "Layui表单生成,表单制作,html表单,form表单,表单设计,表单设计器,表单代码,layui表单提交,Layui表单生成器,Layui在线表单生成器,在线表单设计器,表单生成器,在线表单,layui表单";
    ViewBag.description = "Layui表单生成器,Layui在线表单生成器,在线表单设计器,表单生成器,在线表单,layui表单,Layui表单生成,表单制作,html表单,form表单,表单设计,表单设计器,表单代码,layui表单提交";
    var host = Appsettings.app("BaseFile:HostUrl");
    Layout = "_oayout";
}
@section Styles{ 
<style>
    .copyCssWrap{display:none}.copyCssWrap textarea{width:625px;height:260px;border:10px solid #F8F8F8;border-top-width:0;padding:10px;line-height:20px;overflow:auto;background-color:#3F3F3F;color:#eee;font-size:12px;font-family:Courier New;}.copyCssWrap a{position:absolute;right:20px;bottom:20px;}#pre{width:100%;height:100%;border:none}
</style>
<style>
 .layui-fluid{margin-top: 15px;}
.content{min-height: 796px;}
.nav{text-align: center;}
.nav button{margin-bottom: 3px;width: 80px;}
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
.code-show{min-height: 454px;}
.js-show{min-height: 200px;}
.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;}
    .layui-col-space10 > * {
        padding: 5px;
    }
     selec {
        display: none !important;
    }
    .layui-input-block select, layui-input-inline select {
        visibility: hidden;
        position: absolute;
    }
</style>
}
 
    <div class="layui-row laytool stat001 layui-col-space10">
 
            <div class="layui-col-md1">
                <div class="layui-card nav click-but">
                    <div class="layui-card-header">长</div>
                    <div class="layui-card-body">
                        <button class="layui-btn" data-size="block" data-type="text">输入框</button>
                        <button class="layui-btn" data-size="block" data-type="password">密码框</button>
                        <button class="layui-btn" data-size="block" data-type="select">选择框</button>
                        <button class="layui-btn" data-size="block" data-type="checkbox_a">复选框</button>
                        <button class="layui-btn" data-size="block" data-type="checkbox_b">开关</button>
                        <button class="layui-btn" data-size="block" data-type="radio">单选框</button>
                        <button class="layui-btn" data-size="block" data-type="textarea">文本域</button>
                        <button class="layui-btn" data-size="block" data-type="submit">提交</button>
                    </div>
                </div>
                <div class="layui-card nav">
                    <div class="layui-card-header">短</div>
                    <div class="layui-card-body">
                        <button class="layui-btn" data-size="inline" data-type="text">输入框</button>
                        <button class="layui-btn" data-size="inline" data-type="password">密码框</button>
                        <button class="layui-btn" data-size="inline" data-type="select">选择框</button>
                        <button class="layui-btn" data-size="inline" data-type="checkbox_a">复选框</button>
                        <button class="layui-btn" data-size="inline" data-type="checkbox_b">开关</button>
                        <button class="layui-btn" data-size="inline" data-type="radio">单选框</button>
                        <button class="layui-btn" data-size="inline" data-type="textarea">文本域</button>
                        <button class="layui-btn" data-size="block" data-type="submit">提交</button>
                    </div>
                </div>

            </div>
            <div class="layui-col-md5">
                <div class="layui-card">
                    <div class="layui-card-header">
                        表单-问题反馈QQ群: 514187375
                        <button class="layui-btn layui-btn-sm layui-btn-danger del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button>
                    </div>
                    <div class="layui-card-body code">
                        <form class="layui-form formText" action="" onsubmit="return false">
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card r-code-html">
                    <div class="layui-card-header">html</div>
                    <div class="layui-card-body">
                        <textarea name="" class="layui-textarea code-show"></textarea>
                    </div>
                </div>
                <div class="layui-card r-code-js">
                    <div class="layui-card-header">JS</div>
                    <div class="layui-card-body">
                        <textarea name="" class="layui-textarea js-show"></textarea>
                    </div>
                </div>
            </div>
        </div>
<div id="copyCssWrap" class="copyCssWrap layui-layer-wrap">
    <textarea id="cssTextarea"></textarea>
    <a href="javascript:;" id="copyCssBtn" class="layui-btn layui-btn-normal" data-clipboard-target="#cssTextarea">一键复制</a>
</div>
@section Scripts{
    <script src="@host/lib/clipboard.min.js"></script>
    <script>
        layui.use(['layer', 'form','jquery'], function (exports) {
            var layer = layui.layer, form = layui.form, $ = layui.$, key = '';
            delHtml()
            $('button').on('click', function () {
                var _this = $(this),
                    size = _this.data('size'),
                    type = _this.data('type'),
                    html = '';
                key = randStrName();
                switch (type) {
                    case 'text':
                        html = input(type, size)
                        break;
                    case 'password':
                        html = input(type, size)
                        break;
                    case 'select':
                        html = select(size)
                        break;
                    case 'checkbox_a':
                        html = checkbox_a(size)
                        break;
                    case 'checkbox_b':
                        html = checkbox_b(size)
                        break;
                    case 'radio':
                        html = radio(size)
                        break;
                    case 'textarea':
                        html = textarea(size)
                        break;
                    case 'submit':
                        html = submits(size)
                        break;
                    case 'del':
                        $('form').html("\n")
                        delHtml()
                        $('.code-show').text('')
                        return false
                        break;
                    default:
                        layer.msg('类型错误', { icon: 2 })
                }

                $('.formText').append(html);
                form.render();
                setHtml(html)
            })
            function delHtml() {
                layui.data('form_html', {
                    key: 'html'
                    , remove: true
                });
            }
            function setHtml(html) {
                var h = layui.data('form_html');
                if (h && h.html) {
                    var _d = h.html + html
                } else {
                    var _d = html
                }
                layui.data('form_html', {
                    key: 'html',
                    value: _d
                })
                var new_d = _d.replace(new RegExp('.layui', "g"), '.layui');
                $('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' + new_d + '</form>')
            }
            function input(type, size) {
                var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : '');
                var html = '  <div class="layui-form-item">\n' +
                    '    <label class="layui-form-label">' + name + '</label>\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <input type="' + type + '" name="' + key + '" required  lay-verify="required" placeholder="请输入' + name + '内容" autocomplete="off" class="layui-input">\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function select(size) {
                var html = '  <div class="layui-form-item">\n' +
                    '    <label class="layui-form-label">选择框</label>\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <select name="' + key + '" lay-verify="required" lay-search>\n' +
                    '        <option value=""></option>\n' +
                    '        <option value="0">北京</option>\n' +
                    '        <option value="1">上海</option>\n' +
                    '        <option value="2">广州</option>\n' +
                    '        <option value="3">深圳</option>\n' +
                    '        <option value="4">杭州</option>\n' +
                    '      </select>\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function checkbox_a(size) {
                var html = '  <div class="layui-form-item">\n' +
                    '    <label class="layui-form-label">复选框</label>\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <input type="checkbox" name="' + key + '[]" title="写作">\n' +
                    '      <input type="checkbox" name="' + key + '[]" title="阅读" checked>\n' +
                    '      <input type="checkbox" name="' + key + '[]" title="发呆">\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function checkbox_b(size) {
                var html = '  <div class="layui-form-item">\n' +
                    '    <label class="layui-form-label">开关</label>\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <input type="checkbox" name="' + key + '" lay-skin="switch">\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function radio(size) {
                var html = '  <div class="layui-form-item">\n' +
                    '    <label class="layui-form-label">单选框</label>\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <input type="radio" name="' + key + '" value="男" title="男">\n' +
                    '      <input type="radio" name="' + key + '" value="女" title="女" checked>\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function textarea(size) {
                var html = '  <div class="layui-form-item layui-form-text">\n' +
                    '    <label class="layui-form-label">文本域</label>\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <textarea name="' + key + '" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function submits(size) {
                var html = '  <div class="layui-form-item">\n' +
                    '    <div class="layui-input-' + size + '">\n' +
                    '      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
                    '      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                    '    </div>\n' +
                    '  </div>\n';
                return html;
            }
            function jscode() {
                var html = '<script>' +
                    '  layui.use(\'form\', function(){\n' +
                    '    var form = layui.form;\n' +
                    '    form.on(\'submit(formDemo)\', function(data){\n' +
                    '      layer.msg(JSON.stringify(data.field));\n' +
                    '      return false;\n' +
                    '    });\n' +
                    '  });\n<\/script>';
                return html;
            }
            function randStrName() {
                return Math.random().toString(36).substr(8);
            }
            $('.click-but button').click()
            var jscodehtml = jscode();
            $('.js-show').text(jscodehtml)
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
            //exports('index', {});
        });
    </script>
}